<template>
	<view class="container">
		<div class="detail">
			<image class="bg" src="@/static/images/mine/order/detail-bg@2x.png" mode="aspectFit"></image>
			<div class="tips">
				<image class="icon" src="@/static/images/mine/order/icon-success@2x.png" mode="aspectFit"></image>
				<div class="info">
					<div class="title">{{payment == 3 ? '请联系加油员线下支付' : '支付成功！'}}</div>
					<div class="desc">感谢惠顾</div>
				</div>
			</div>
			<div class="content">
				<image class="top" src="@/static/images/mine/order/top@2x.png" mode="aspectFit"></image>
				<div class="context">
					<div class="price">
						<div class="symbol">¥</div>
						<div class="num">{{ detail.payCost }}</div>
						<div class="unit">元</div>
					</div>
					<div class="desc">山东石化新庄958站</div>
					<div class="list-item">
						<div class="item">
							<div class="label">订单金额：</div>
							<div class="value">{{ detail.orderCost }}元</div>
						</div>
						<div class="item">
							<div class="label">优惠金额：</div>
							<div class="value red">-{{ detail.discountAmount }}元</div>
						</div>
						<div class="item">
							<div class="label">加油油号：</div>
							<div class="value">{{ detail.productName }}</div>
						</div>
						<div class="item">
							<div class="label">加油升数：</div>
							<div class="value">{{ detail.productQuantity }}L</div>
						</div>
						<div class="item">
							<div class="label">订单编号：</div>
							<div class="value">{{ detail.orderSn }}</div>
						</div>
						<div class="item">
							<div class="label">交易单号：</div>
							<div class="value">{{ detail.id }}</div>
						</div>
						<div class="item">
							<div class="label">支付时间：</div>
							<div class="value">{{ detail.createTime }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="confirm-btn" @click="handleToSwitchTab">我知道了</div>
		</div>
	</view>
</template>

<script>
	import {
		petrolOrderDetail
	} from '@/api/petrol-order.js';

	export default {
		data() {
			return {
				sn: '',
				payment: '',
				detail: {}
			};
		},
		onLoad(opt) {
			this.sn = opt.sn;
			this.payment = opt.payment;
			this.getPetrolOrderDetail(opt.sn);
		},
		methods: {
			handleToSwitchTab() {
				this.$tab.switchTab('/pages/index');
			},
			getPetrolOrderDetail(orderSn) {
				const data = {
					orderSn
				};
				petrolOrderDetail(data).then(res => {
					this.detail = res.data;
					console.log(res);
				});
			}
		}
	};
</script>

<style lang="scss">
	.detail {
		position: relative;
		overflow: hidden;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 750rpx;
			height: 320rpx;
			z-index: -1;
		}

		.tips {
			margin-top: 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				margin-right: 32rpx;
				width: 148rpx;
				height: 112rpx;
			}

			.info {
				.title {
					margin-bottom: 6rpx;
					font-size: 40rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #ffffff;
					max-width: 400rpx;
				}

				.desc {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}

		.content {
			margin-top: 72rpx;

			.top {
				display: block;
				width: 702rpx;
				height: 64rpx;
				margin: 0 auto;
			}

			.context {
				width: 654rpx;
				height: 628rpx;
				background: #ffffff;
				margin: 0 auto;

				.price {
					display: flex;
					justify-content: center;
					align-items: center;

					.symbol {
						font-size: 40rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						line-height: 1;
					}

					.num {
						margin: 0 12rpx 0 2rpx;
						font-size: 80rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #111111;
						line-height: 1;
					}

					.unit {
						font-size: 40rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						line-height: 1;
					}
				}

				.desc {
					margin-top: 8rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					text-align: center;
					line-height: 1;
				}

				.list-item {
					padding-left: 32rpx;
					padding-top: 24rpx;
					margin-top: 24rpx;
					border-top: 2rpx dashed #eeeeee;

					.item {
						display: flex;
						align-items: center;
						margin-bottom: 24rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;

						.label {
							color: #999999;
						}

						.value {
							color: #111111;
						}

						.red {
							color: #ff4b44;
						}
					}
				}
			}
		}

		.confirm-btn {
			width: 462rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 40rpx auto 0;
			background: linear-gradient(90deg, #00e4ff 0%, #1e60ff 100%);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
			text-align: center;
		}
	}
</style>
